<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-12 14:51:16
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-09-08 16:42:54
-->
<template>
  <div>
    <el-row :gutter="40" style="display:flex;align-items:center;">
      <el-col :span="16" class="column col-common-box">
        <div
          style="display:flex;justify-content:center;align-items:center;"
          class="column"
        >
          <div id="container1"></div>
        </div>
      </el-col>
      <el-col :span="8" style="padding-left:0!important;">
        <el-row class="left-row-box" v-for="(item, index) in data" :key="index">
          <el-col
            :span="14"
            :class="{
              'z-before-box': index == 0,
              'qj-before-box': index == 1,
              'qq-before-box': index == 2,
              'ts-before-box': index == 3,
              'wg-before-box': index == 4
            }"
            >{{ item.item }}</el-col
          >
          <el-col :span="10" style="text-align:center;font-size:1.2rem;">{{
            item.count
          }}</el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="title-today-box">今日时段考勤统计</el-row>
    <el-row :gutter="20">
      <!-- 午休 -->
      <el-col :span="12" v-for="(item,index) in list" :key="index">
        <div class="name-col-box">{{item.rule_name}}</div>
        <BorderFlex :borderList="item.list"></BorderFlex>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Chart } from '@antv/g2'
import BorderFlex from './Common/BorderFlex.vue'
export default {
  components: {
    BorderFlex
  },
  props: {
    proportion: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      innerHeight: document.body.clientHeight * 0.56,
      ringProgress: null,
      data: [],
      list: []
    }
  },
  methods: {
    init (sum) {
      this.ringProgress = new Chart({
        container: 'container1',
        autoFit: true,
        height: this.innerHeight / 3.5,
        width: this.innerHeight / 3.5
      })
      this.ringProgress.data(this.data)
      this.ringProgress.scale('percent', {
        formatter: val => {
          val = val * 100 + '%'
          return val
        }
      })
      this.ringProgress.legend(false)
      this.ringProgress.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.7
      })
      this.ringProgress.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      // 辅助文本
      this.ringProgress
        .annotation()
        .text({
          position: ['50%', '50%'],
          content: '人数',
          style: {
            fontSize: 15,
            fill: '#fff',
            stroke: '#03053f',
            textAlign: 'center'
          },
          offsetY: -20
        })
        .text({
          position: ['50%', '50%'],
          content: `${sum}`,
          style: {
            fontSize: 16,
            fill: '#fff',
            stroke: '#03053f',
            textAlign: 'center'
          },
          offsetX: -10,
          offsetY: 20
        })
        .text({
          position: ['50%', '50%'],
          content: '人',
          style: {
            fontSize: 14,
            fill: '#fff',
            stroke: '#03053f',
            textAlign: 'center'
          },
          offsetY: 20,
          offsetX: 10
        })
      this.ringProgress
        .interval()
        .adjust('stack')
        .position('percent')
        .color('item', ['#00E2B5', '#EFC241', '#FD7603', '#8E98FF', '#01C7FF'])
        .label(false)
        .tooltip('item*percent', (item, percent) => {
          percent = percent * 100 + '%'
          return {
            name: item,
            value: percent
          }
        })

      this.ringProgress.interaction('element-active')

      this.ringProgress.render()
    }
  },
  watch: {
    proportion: {
      handler: function (newValue, oldValue) {
        if (newValue !== oldValue && oldValue.length !== 0) {
          // this.chartLenged.changeData(this.lengedList)
          this.ringProgress.destroy()
          this.init(newValue[0].sum)
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        const str = []
        this.proportion.forEach((item, index) => {
          if (index === 0) {
            this.data = item.list
            if (this.ringProgress !== null) {
              this.ringProgress.destroy()
              this.init(item.sum)
            } else {
              this.init(item.sum)
            }
          } else {
            str.push(item)
          }
        })
        this.list = str
      }, 500)
    })
  },
  created () {}
}
</script>
<style lang="less" scoped>
.col-common-box {
  color: #01c7ff;
  font-size: 24px;
  .name-font-box {
    padding: 15px 0;
  }
}
.left-row-box {
  color: #fff;
  // display: flex;
  align-items: center;
  width: 10.5rem;
}
.z-before-box {
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #00e2b5;
    border-radius: 50%;
    left: 0;
    top: 7px;
  }
}
.qj-before-box {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #efc241;
    border-radius: 50%;
    left: 0;
    top: 7px;
  }
}
.qq-before-box {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #fd7603;
    border-radius: 50%;
    left: 0;
    top: 7px;
  }
}
.ts-before-box {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #8e98ff;
    border-radius: 50%;
    left: 0;
    top: 7px;
  }
}
.wg-before-box {
  padding-left: 20px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #01c7ff;
    border-radius: 50%;
    left: 0;
    top: 7px;
  }
}
.title-today-box {
  width: 100%;
  text-align: center;
  color: #01c7ff;
  margin-top: -15px;
  margin-bottom: 15px;
  font-size: 1.4rem;
}
.name-col-box {
  text-align: center;
  color: #fff;
  margin-bottom: 15px;
}
</style>
